<template>
	<view>
		<view class="title-box">
			<uni-title title1="登录" title2="朝夕" text1="视频课资源下载"></uni-title>
		</view>
		<form>
			<view class="item">
				<view class="label">QQ</view>
				<input v-model="loginData.name" type="text" placeholder="请输入QQ">
			</view>
			<view class="item">
				<view class="label">密码</view>
				<input v-model="loginData.password" password="true" type="text" placeholder="请输入密码">
			</view>
			<view class="item">
				<view class="label">验证码</view>
				<input v-model="loginData.code" type="text" placeholder="请输入验证码">
				<text @click="codeIm" style="width: 80px;height: 40px;border: 2px solid #333;display: flex;align-items: center;justify-content: center;">
					{{code}}
				</text>
			</view>
			<view class="item">
				<button @click="subFun" type="primary">登录</button>
			</view>
			<view class="item">
				<view class="tip-text">
					<text>暂无账号，我要注册</text>
				</view>
				
			</view>
		</form>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				// 数字验证码
				code: '',
				// form表单双向绑定的值
				loginData:{
					name:'',
					password: '',
					code: '',
				}
			}
		},
		onLoad() {
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/code', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.code = res.data.number
			        // this.text = 'request success';
			    }
			});
		},
		methods: {
			codeIm(){
				// 验证码(请求)
				uni.request({
				    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/code', //仅为示例，并非真实接口地址。
				    success: (res) => {
						this.code = res.data.number
				        // this.text = 'request success';
				    }
				});
			},
			subFun(){
				let msg = '';
				if (!this.loginData.code || this.loginData.code.length != 4 || this.code !=this.loginData.code){
					msg = '请输入正确格式的验证码'
				}
				if (!this.loginData.password || this.loginData.password.length < 5){
					msg = '请输入正确格式的密码'
				}
				if (!this.loginData.name || this.loginData.name.length < 6){
					msg = '请输入正确格式的账号'
				}
				if(!msg){
					let _this = this
					uni.showToast({
						title:'验证通过',
						duration:2000,
						icon:"none",
						success() {
							uni.setStorage({
								key: 'token',
								data: _this.loginData.name,
								success() {
									uni.switchTab({
										url:'/pages/index/index'
									})
								}
							})
						}
					})	
				}else{
					// 显示消息提示框
					uni.showToast({
						title:msg,
						duration:2000,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* #ifdef APP-PLUS */
	.title-box {
		padding: 30px 0;
	}

	/* #endif */
	.item {
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 1px 10px;
		border-top: 2px solid #efefef;

		.label {
			width: 100px;
		}
		input {
			flex: 1;
		}
		button {
			width: 100%;
			margin-top: 30px;
		}
		
		.tip-text{
			width: 100%;
			text-align: right;
			color: #333;
			text{
				text-decoration: underline;
				
			}
		}
	}
</style>
